<template>
  <div id="cqd">
    <el-row>
      <!-- 陈四楼煤矿 -->
      <vae-echarts v-if="ycfxcode=='4'" height="60vh" :options="zhe1"></vae-echarts>
      <!-- 云盖山二矿 -->
      <vae-echarts v-if="ycfxcode=='2'" height="60vh" :options="zhe2"></vae-echarts>
      <!-- 隆德矿业 -->
      <vae-echarts v-if="ycfxcode=='1'" height="60vh" :options="zhe3"></vae-echarts>
      <!-- 大南湖一矿氧化 -->
      <vae-echarts v-if="ycfxcode=='5'" height="60vh" :options="zhe4"></vae-echarts>
      <!-- 大南湖一矿自然 -->
      <vae-echarts v-if="ycfxcode=='6'" height="60vh" :options="zhe5"></vae-echarts>
      <!--  "众源煤矿"-->
      <vae-echarts v-if="ycfxcode=='7'" height="60vh" :options="zhe6"></vae-echarts>
      <!-- 内蒙古串草圪旦煤矿 -->
      <vae-echarts v-if="ycfxcode=='8'" height="60vh" :options="zhe7"></vae-echarts>
    </el-row>
  </div>
</template>
<script>
export default {
  props: {
    ycfxcode: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      zhe1: {},
      zhe2: {},
      zhe3: {},
      zhe4: {},
      zhe5: {},
      zhe6: {},
      zhe7: {},
      table: {
        data: [], //数据
        total: 0, //总条数
        currentPage: 1, //当前页码
        pageSize: 10 //每页条数
      }
    };
  },
  mounted() {
    this.initData();
  },
  created() {},
  methods: {
    initData() {
      this.request({
        url: "data/getData/3.22",
        method: "get"
      }).then(data => {
        this.initzhe(data.data);
      });

      this.request({
        url: "data/getData/3.23",
        method: "get"
      }).then(data => {
        this.initzhe1(data.data);
      });

      this.request({
        url: "data/getData/3.25",
        method: "get"
      }).then(data => {
        this.initzhe2(data.data);
      });
      this.request({
        url: "data/getData/3.26",
        method: "get"
      }).then(data => {
        this.initzhe3(data.data);
      });
      this.request({
        url: "data/getData/3.27",
        method: "get"
      }).then(data => {
        this.initzhe4(data.data);
      });
      this.request({
        url: "data/getData/3.28",
        method: "get"
      }).then(data => {
        this.initzhe5(data.data);
      });
      this.request({
        url: "data/getData/3.31",
        method: "get"
      }).then(data => {
        this.initzhe6(data.data);
      });
    },
    initzhe6(data) {
      this.zhe3 = {
        title: {
          text: "隆德矿业215综采回风隅角一氧化碳",
          //           subtext: "数据来自西安兰特水电测控技术有限公司",
          left: "center",
          align: "right",
          textStyle: { fontSize: 25 }
        },
        grid: {
          bottom: 80,
          right: "5%"
        },
        tooltip: {
          trigger: "axis",
          textStyle: { fontSize: 20 },
          axisPointer: {
            type: "cross",
            animation: false,
            label: {
              backgroundColor: "#505765"
            }
          }
        },
        legend: {
          // itemHeight: 15,
          // itemWidth: 25,
          data: ["215综采回风隅角一氧化碳"],
          textStyle: { fontSize: 18, fontWeight: "bold" },
          top: 30
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            data: data.map(item => {
              return item.time;
            }),
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 20
              }
            }
          }
        ],
        yAxis: [
          {
            nameTextStyle: { fontSize: 18 },
            name: "数值",
            type: "value",
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 20
              }
            }
            //             max: 500
          }
        ],
        series: [
          {
            name: "215综采回风隅角一氧化碳",
            type: "line",
            smooth: true,
            itemStyle: { color: "#043C8C" },
            lineStyle: {
              width: 3,
              color: "#043C8C"
            },
            emphasis: {
              focus: "series"
            },

            data: data.map(item => {
              return item.val;
            })
          }
        ]
      };
    },
    initzhe(data) {
      let y = {
        type: "value",
        name: "数值（%CH4）",
        nameTextStyle: { fontSize: 18 },
        axisLabel: {
          show: true,
          textStyle: {
            fontSize: 20
          }
        }
      };
      let t = {
        trigger: "axis",
        textStyle: { fontSize: 20 },
        axisPointer: {
          type: "cross",
          animation: false,
          label: {
            backgroundColor: "#505765"
          }
        },
        formatter: function(param, ticket, cb) {
          let str = "";
          param
            ? param.forEach(function(item, i) {
                str += item.name + item.value[1];
              })
            : null;
          return str;
        }
      };
      this.zhe1 = {
        title: {
          textStyle: { fontSize: 25 },
          text: "陈四楼煤矿环境瓦斯历史曲线",
          //           subtext: "数据来自西安兰特水电测控技术有限公司",
          left: "center",
          align: "right"
        },
        grid: {
          bottom: 80,
          right: "5%",
          left:"5%"
        },

        tooltip: t,

        legend: {
          data: data.mnl.y[0].legend,
          textStyle: { fontSize: 18, fontWeight: "bold" },
          top: 30
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            data: data.mnl.x,
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 20
              }
            }
          }
        ],
        yAxis: y,
        series: [
          {
            name: data.mnl.y[0].legend[0],
            type: "line",
            itemStyle: { color: "#043C8C" },
            lineStyle: {
              width: 3,
              color: "#043C8C"
            },
            emphasis: {
              focus: "series"
            },

            data: data.mnl.y[0].data[0].monitorValue
          }
        ]
      };
    },
    initzhe1(data) {
      let y = {
        type: "value",
        name: "数值（%CH4）",
        nameTextStyle: { fontSize: 18 },
        axisLabel: {
          show: true,
          textStyle: {
            fontSize: 20
          }
        }
      };
      let t = {
        trigger: "axis",
        textStyle: { fontSize: 20 },
        axisPointer: {
          type: "cross",
          animation: false,
          label: {
            backgroundColor: "#505765"
          }
        },

        formatter: function(param, ticket, cb) {
          let str = "";
          param
            ? param.forEach(function(item, i) {
                str += item.name + item.value[1];
              })
            : null;
          return str;
        }
      };
      this.zhe2 = {
        title: {
          textStyle: { fontSize: 25 },
          text: "云盖山二矿环境瓦斯历史曲线",
          left: "center",
          align: "right"
        },
        grid: {
          bottom: 80,
          right: "5%",
          left:"5%"
        },

        tooltip: t,

        legend: {
          data: data.mnl.y[0].legend,
          textStyle: { fontSize: 18, fontWeight: "bold" },
          top: 30
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            data: data.mnl.x,
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 20
              }
            }
          }
        ],
        yAxis: y,
        series: [
          {
            name: data.mnl.y[0].legend[0],
            type: "line",
            itemStyle: { color: "#043C8C" },
            lineStyle: {
              width: 3,
              color: "#043C8C"
            },
            emphasis: {
              focus: "series"
            },

            data: data.mnl.y[0].data[0].monitorValue
          }
        ]
      };
    },
    initzhe2(data) {
      this.zhe4 = {
        title: {
          text: "大南湖一矿工作面回风隅角CO浓度",
          //           subtext: "数据来自西安兰特水电测控技术有限公司",
          left: "center",
          align: "right",
          textStyle: { fontSize: 25 }
        },
        grid: {
          bottom: 80,
          right: "5%",
          left:"3%"
        },
        tooltip: {
          trigger: "axis",
          textStyle: { fontSize: 20 },
          axisPointer: {
            type: "cross",
            animation: false,
            label: {
              backgroundColor: "#505765"
            }
          }
        },
        legend: {
          data: ["工作面回风隅角CO浓度"],
          textStyle: { fontSize: 18, fontWeight: "bold" },
          top: 30
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            data: data.map(item => {
              return item.time;
            }),
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 20
              }
            }
          }
        ],
        yAxis: [
          {
            nameTextStyle: { fontSize: 18 },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 20
              }
            },
            name: "co浓度(10*(-6))",
            type: "value",
            max: 40
          }
        ],
        series: [
          {
            name: "工作面回风隅角CO浓度",
            type: "line",
            smooth: true,
            itemStyle: { color: "#043C8C" },
            lineStyle: {
              width: 3,
              color: "#043C8C"
            },
            emphasis: {
              focus: "series"
            },

            data: data.map(item => {
              return item.co;
            })
          }
        ]
      };
    },
    initzhe3(data) {
      this.zhe5 = {
        title: {
          text: "大南湖一矿工作面回风隅角CO浓度",
          //           subtext: "数据来自西安兰特水电测控技术有限公司",
            left: "center",
          align: "right",
          textStyle: { fontSize: 25 }
        },
        grid: {
          bottom: 80,
          right: "5%",
          left:"3%"
        },
        tooltip: {
          trigger: "axis",
          textStyle: { fontSize: 20 },
          axisPointer: {
            type: "cross",
            animation: false,
            label: {
              backgroundColor: "#505765"
            }
          }
        },
        legend: {
          data: ["工作面回风隅角CO浓度"],
          textStyle: { fontSize: 18, fontWeight: "bold" },
           top: 30
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            data: data.map(item => {
              return item.time;
            }),
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 20
              }
            }
          }
        ],
        yAxis: [
          {
            nameTextStyle: { fontSize: 18 },
            name: "co浓度(10*(-6))",
            type: "value",
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 20
              }
            }
            //             max: 500
          }
        ],
        series: [
          {
            name: "工作面回风隅角CO浓度",
            type: "line",
            smooth: true,
            itemStyle: { color: "#043C8C" },
            lineStyle: {
              width: 3,
              color: "#043C8C"
            },
            emphasis: {
              focus: "series"
            },

            data: data.map(item => {
              return item.co;
            })
          }
        ]
      };
    },
    initzhe4(data) {
      this.zhe6 = {
        title: {
          text: "众源煤矿二部皮带机头CO浓度",
          //           subtext: "数据来自西安兰特水电测控技术有限公司",
           left: "center",
          align: "right",
          textStyle: { fontSize: 25 }
        },
        grid: {
          bottom: 80,
          right: "5%"
        },
        tooltip: {
          trigger: "axis",
          textStyle: { fontSize: 20 },
          axisPointer: {
            type: "cross",
            animation: false,
            label: {
              backgroundColor: "#505765"
            }
          }
        },
        legend: {
          data: ["CO浓度"],
           top: 30,
          textStyle: { fontSize: 18, fontWeight: "bold" }
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            data: data.map(item => {
              return item.time;
            }),
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 20
              }
            }
          }
        ],
        yAxis: [
          {
            name: "co浓度(ppm)",
            nameTextStyle: { fontSize: 18 },
            type: "value",
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 20
              }
            }
            //             max: 500
          }
        ],
        series: [
          {
            name: "CO浓度",
            type: "line",
            smooth: true,
            itemStyle: { color: "#043C8C" },
            lineStyle: {
              width: 3,
              color: "#043C8C"
            },
            emphasis: {
              focus: "series"
            },

            data: data.map(item => {
              return item.co;
            })
          }
        ]
      };
    },
    initzhe5(data) {
      this.zhe7 = {
        title: {
          text: "内蒙古串草圪旦煤矿6106工作面综合O2和CO浓度情况",
           left: "center",
          align: "right",
          textStyle: { fontSize: 25 }
        },
        grid: {
          bottom: 80,
          right: "13%"
        },
        tooltip: {
          trigger: "axis",
          textStyle: { fontSize: 20 },
          axisPointer: {
            type: "cross",
            animation: false,
            label: {
              backgroundColor: "#505765"
            }
          }
        },
        legend: {
          data: ["综合O2和CO浓度情况"],
          textStyle: { fontSize: 18, fontWeight: "bold" },

           top: 30
        },
        xAxis: {
          name: "co体积分数/10*(-2)",
          nameTextStyle: { fontSize: 18 },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 20
            }
          }
        },
        yAxis: {
          name: "co体积分数/10*(-6)",
          nameTextStyle: { fontSize: 18 },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 20
            }
          }
        },
        //         xAxis: [
        //           {
        //             type: "category",
        //             boundaryGap: false,
        //             axisLine: { onZero: false },
        //             data: data.map(item => {
        //               return item.time;
        //             })
        //           }
        //         ],
        //         yAxis: [
        //           {
        //             name: "co浓度(ppm)",
        //             type: "value"

        //           }
        //         ],
        series: [
          {
            itemStyle: { color: "#043C8C" },

            symbolSize: 10,
            //             name: "CO浓度",
            type: "scatter",

            data: data.map(item => [item.o2, item.co])
          },
          {
            name: "line",
            type: "line",
            datasetIndex: 1,
            symbolSize: 0.1,
            symbol: "circle",
            label: { show: true, fontSize: 16 },
            labelLayout: { dx: -20 },
            encode: { label: 2, tooltip: 1 }
          }
        ]
      };
    }
  }
};
</script>
<style lang="less" scoped>
#cqd /deep/ ::-webkit-scrollbar-thumb {
  background-color: #dddddd !important;
}
</style>